﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Image</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <style>
        .contenteditable {
            width: 200px;
            height: 150px;
            border: solid;
        }

        .kuai {
            float: left;
            border: 1px solid #aaaaaa;
            width: 500px;
            height: 300px;
        }

        .resg label {
            height: 30px;
            margin: auto 20px auto 20%;
        }

        .resg input {
            height: 30px;
        }

        .cols {
            width: 80%;
            height: 50px;
        }
    </style>
</head>
<body>

    <div class="kuai">
        <form id="forms">
            <div style="position: relative;border: 5px solid lightblue;width: 100px;height:100px;margin: 5px auto;border-radius: 50%;float:left">

                <img src="~/Content/img/head.png" alt="选择并上传头像" id="avatar_img" style="width: 90px;height: 90px;left:0;top: 0;border-radius: 50%;" />
                <input type="file" id="avatar_file" name="avatar_file" @*accept="image/jpg,image/png,image/gif,image/jpg"*@ style="width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;" />
            </div>
            <input name="sde" />
            <input type="button" id="btn" value="提交" />
        </form>
        <script>
            var btn = document.getElementById('btn');
            btn.onclick = function (e) {
                debugger
                var formdata = new FormData(document.getElementById("forms"));
                //formdata.append("sde", "12");
                //formdata.append("sde", "1as2");
                //formdata.append("sde", "1d2q2");
                //formdata.append("sde", "1ccxz2");
                //console.log(formdata.get("sde"))
                //console.log(formdata.getAll("sde"))
                //formdata.set("sde", "dasdasd1231")
                //console.log(formdata.get("sde"))
                //console.log(formdata.getAll("sde"))
                //formdata.delete("sde");
                //console.log(formdata.get("sde"))

                //ajax方式
                $.ajax({
                    url: "/UploadFile/Image",
                    type: "post",
                    datatype: "json",
                    processData: false,
                    contentType: false,
                    data:formdata,
                    success: function (data, xhr, d) {
                        if (data.status == "0") {
                            document.getElementById('avatar_img').src = data.url;
                        }
                    },
                    error: function (data, xhr, d) {
                        if (data.status == "0") {
                           // document.getElementById('avatar_img').src = data.url;
                        }
                    }
                })

                ////原始js
                //var xhr = new XMLHttpRequest();
                //xhr.open('post', "/UploadFile/Image", true);
                //xhr.onload=function (data, xhre,da) {
                //    debugger
                //    if (xhr.status == 200) {
                //        document.getElementById('avatar_img').src = JSON.parse(xhr.response).url;
                //    }
                //};
                //xhr.send(formdata);
            }
        </script>


    </div>

    <div class="kuai resg" style="padding:20px;height:250px;">
        <form id="fornda" action="@Request.RawUrl">
            <div>
                <div style="width:105px;height:105px;border:7px solid floralwhite;border-radius:50%;">
                    <img id="show" src="~/Content/img/head.png" style="width:100px;height:100px;margin-top:2.5px;margin-left:2.5px;position:absolute;border-radius:50%;" />
                    <input type="file" name="uploadimg" id="uploadimg" style="width:100px;height:100px;margin-top:2.5px;margin-left:2.5px;position:absolute;border-radius:50%;opacity:0; " />
                </div>
            </div>

            <div class="cols">
                <label>用户名 :</label><input name="username" id="username" placeholder="手机号/邮箱/用户名" />
            </div>
            <div class="cols">
                <label>密 码 :</label><input type="password" name="pwd" id="pwd" placeholder="长度为6-18位密码" />
            </div>
            <div class="cols">
                <input type="submit" onclick="submitform(this)" />
            </div>
        </form>


        <script>
         
            $('#uploadimg').change(function () {
                debugger
                var file = this.files[0];
                //var formdata = new FormData();
                //formdata.append('imgData', file);
                //$.ajax({
                //    url: "/UploadFile/Image",
                //    data: formdata,
                //    type: 'post',
                //    dateType: 'json',
                //    contentType: false,
                //    processData: false,
                //    success: function (data) {
                //        debugger
                //        if (data.status == "1") {
                //            debugger
                //        }
                //        if (data.status == "0") {
                //            $("#show").attr("src", data.url);
                //        }
                //    },
                //    error: function (data) {
                //        debugger
                //        if (data.status == "1") {
                //            debugger
                //        }
                //        if (data.status) {
                //            debugger
                //        }
                //    }
                //})


                // 读取文件URL
                var reader = new FileReader();
                reader.readAsDataURL(file);
                // 阅读文件完成后触发的事件
                reader.onload = function () {
                    // 读取的URL结果：this.result
                    $("#show").attr("src", this.result);
                }
            })

         
            var submitform = function (e) {
                debugger

                $(e).parents('form').submit(function (event) {
                    event.preventDefault();
                })
                var name = $('#username').val();
                var pwd = $('#pwd').val();
                if ($.trim(name) == "" || $.trim(pwd) == "") {
                    alert("用户名和密码不能为空")
                    return;
                }
                debugger
                $.ajax({
                    url: '/UploadFile/Index',
                    type: "post",
                    data: {
                        name: name,
                        pwd: pwd,
                        img: $("#show")[0].src
                    },
                    success: function (data) {
                        if (data.status == "1") {
                            $(e).parents('form').unbind("submit");
                            $(e).parents('form').submit();
                        }
                        if (data.status == "0") {
                            alert(data.msg)
                        }
                    }
                })
            }
        </script>
    </div>
    <div class="kuai resg" style="padding:20px;height:250px;width:200px">
        <form id="fornda" action="@Request.RawUrl">
            <div>
                <div style="width:105px;height:105px;border:7px solid floralwhite;border-radius:50%;">
                    <img id="imgs" src="~/Content/img/head.png" style="width:100px;height:100px;margin-top:2.5px;margin-left:2.5px;position:absolute;border-radius:50%;" />
                    <input type="file" name="up" id="up" style="width:100px;height:100px;margin-top:2.5px;margin-left:2.5px;position:absolute;border-radius:50%;opacity:0; " />
                </div>
            </div>           
        
        </form>
        <script>
            var input = document.getElementById("up"); // input file
            input.onchange = function () {
                var file = this.files[0];
                if (!!file) {
                    var reader = new FileReader();
                    reader.readAsArrayBuffer(file);
                    reader.onload = function () {
                        debugger
                        var binary = this.result;
                        upload(binary);
                    }
                }
            }

            //文件上传
            function upload(binary) {
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/UploadFile/Index");
                xhr.overrideMimeType("application/octet-stream");
                //直接发送二进制数据
                if (xhr.sendAsBinary) {
                    xhr.sendAsBinary(binary);
                } else {
                    xhr.send(binary);
                }
                // 监听变化
                xhr.onreadystatechange = function (e) {
                    debugger
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            // 响应成功
                        }
                    }
                }
            }
        </script>
    </div>
    <br />
    <div class="kuai">
        <div contenteditable="true" class="contenteditable"></div>
        <p contextmenu="divceshi">zouzheiqo </p>
        <menu type="context" id="divceshi">
            <menuitem label="refs">语文</menuitem>
            <menuitem label="reds">英语</menuitem>
        </menu>
    </div>


    <div class="kuai">
        <ul>
            <li data-animal-type="鸟类" onclick="show(this)">喜鹊</li>
            <li data-animal-type="鱼类" onclick="show(this)">金枪鱼</li>
            <li data-animal-type="蜘蛛" onclick="show(this)">蝇虎</li>
        </ul>
        <script>
            function show(e) {

                var indo = e.getAttribute("data-animal-type")
                var info = $(e).attr("data-animal-type");
                alert(info);
                alert("indo" + indo);
            }
        </script>
    </div>


    <!--dir 规定元素中文本内容的方向-->
    <div class="kuai">
        <p dir="rtl" style="border:solid;width:400px;">Write this text right-to-left!</p>
        <p dir="ltr" style="border:solid;width:400px;">Write this text left-to-right!</p>
    </div>
    <!--draggable 规定元素是否可被拖动-->
    <div class="kuai">
        <style type="text/css">
            #div1 {
                width: 350px;
                height: 100px;
                padding: 10px;
                border: 1px solid #aaaaaa;
            }
        </style>
        <p id="aa" draggable="true" ondragstart="drag(event)">规定元素是否s</p>
        <p id="drag2" draggable="true" ondragstart="drag(event)">规定元素是否可被拖动</p>
        <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
        <div id="div1" ondrop="drops(event)" ondragover="allowDrop(event)"></div>

        <script type="text/javascript">
            function allowDrop(ev) {
                ev.preventDefault();
            }

            function drag(ev) {
                ev.dataTransfer.setData("Text", ev.target.id);
            }

            function drops(ev) {
                var data = ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
                ev.preventDefault();
            }
        </script>

    </div>
    <!--draggable 规定元素是否可被拖动-->
    <div class="kuai">
        <div title="目标区域" ondragover="dragover(event)" ondrop="drop(event)" style="width:100px;height:150px;border:dotted "></div>
        <p id="uidong" draggable="true" ondragstart="start(event)">移动</p>
        <script>
            function dragover(e) {
                e.preventDefault();
            }
            function drop(e) {
                var s = e.dataTransfer.getData("context");
                e.target.appendChild(document.getElementById(s));
                e.preventDefault();
            }
            function start(e) {
                e.dataTransfer.setData("context", e.target.id);
            }
        </script>
    </div>
    <h4>这个表格有一个标题，以及粗边框：</h4>

    <table border="6">
        <caption>我的标题</caption>
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>
    <!--表单-->
    <div class="kuai" style="height:100px;width:200px;">


        <form id="foem" action="@Request.RawUrl">
            <label>姓名:</label>
            <input name="name" id="name" />
            <input id="submit" type="submit" onclick="onsusbmit(this)" value="提交" />
        </form>
        <script>
            function onsusbmit(e) {
                var name = $.trim($('#name').val());
                $(e).parents('form').submit(function (event) {
                    event.preventDefault();//取消表单的原有事件 提交事件
                });
                if (name == "") {//前端校验参数
                    alert("用户名不能为空")
                } else {
                    if (name.length < 5) { //前端校验参数
                        alert("用户名长度不能小于5")
                    } else {
                        $.ajax("/UploadFile/Index", { //服务器端校验参数
                            data: { "name": name },
                            dataType: 'json',
                            type: 'json',
                            async: false,
                            success: function (data) {
                                if (data.status == "1") {//校验成功
                                    alert('yonghu:' + name)
                                    $(e).parents('form').unbind("submit");//恢复默认事件 提交事件
                                    $(e).parents('form').submit();//提交数据
                                }
                                if (data.status == "0") {//校验失败
                                    alert(data.msg)
                                }
                            }
                        })

                    }
                }

            }

        </script>
    </div>
    <!--规定对元素是否进行拼接和语法检查-->
    <div class="kuai" style="height:100px;width:100px;" contenteditable="true" spellcheck="true">
        <input spellcheck="true" />
    </div>

    <div class="kuai" contenteditable="true">
        <canvas id="ca" style="width:200px;height:300px;border:1px solid #d3d3d3;" contenteditable="true"></canvas>
        <script>
            var ca = document.getElementById('ca');
            var cav = ca.getContext('2d');
            var my = cav.createLinearGradient(0, 0, 200, 200);
            my.addColorStop(0, 'white');
            my.addColorStop(1, 'green');
            cav.fillStyle = my;
            cav.fillRect(0, 0, 300, 300);
        </script>
    </div>
    <div class="kuai">
        <input type="button" onclick="aj()" value="ajax.get" />
        <input type="button" onclick="ps()" value="ajax.post" />
        <input type="button" onclick="ajxs()" value="ajax.ajax" />
        <script>
            function aj() {
                $.get("/UploadFile/Index?name=asd", function (data, status, xr) {
                    debugger
                });
            }
            function ps() {
                $.post("/UploadFile/Index", { "name": "dad" }, function (data, status, xr) {
                    debugger
                })
            }
            //$.ajax contentType 和 dataType , contentType 主要设置你发送给服务器的格式，dataType设置你收到服务器数据的格式
            //在 jquery 的 ajax 中， contentType都是默认的值：application/x-www-form-urlencoded，
            //这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。
            //如： wwwh.baidu.com/q?key=fdsa&lang=zh 这是get , 而 post 请求则是使用请求体，参数不在 url 中，
            //在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。
            //键值对这样组织在一般的情况下是没有什么问题的，这里说的一般是，不带嵌套类型JSON，也就是 简单的JSON，形如这样：
            //    {
            //       a: 1,
            //       b: 2,
            //       c: 3
            //    }

            //但是在一些复杂的情况下就有问题了。 例如在 ajax 中你要传一个复杂的 json 对像，也就说是对象嵌数组，数组中包括对象，如果你这样传：
            //    {
            //       data: {
            //            a: [{
            //               x: 2
            //            }]
            //       }
            //    }
            //这个复杂对象， application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以参考 ) ,
            //你传进去可以发送请求，但是服务端收到数据为空， 因为 ajax 没有办法知道怎样处理这个数据。
            //            这怎么可以呢？
            //聪明的程序员发现 http 还可以自定义数据类型，于是就定义一种叫 application/json 的类型。这种类型是 text ， 我们 ajax 的复杂JSON数据，
            //用 JSON.stringify序列化后，然后发送，在服务器端接到然后用 JSON.parse 进行还原就行了，这样就能处理复杂的对象了。
            //$.ajax({
            //dataType: 'json',
            //    contentType: 'application/json',
            //data: JSON.stringify({a: [{b:1, a:1}]})
            //})
            //这样你就可以发送复杂JSON的对象了。像现在的 restclient 都是这样处理的。
            function ajxs() {
                $.ajax({
                    url: "/UploadFile/Index",
                    type: 'post',
                    dataType: 'json',
                    data: { // JSON.stringify( {
                        name: "dad"
                        // })
                    },
                    //contentType: "application/json",
                    // contentType:" application/x-www-form-urlencoded",//默认值
                    //processData: false,
                    success: function (data) {
                        debugger
                    },
                    error: function (data) {
                        debugger
                    }
                })
            }
        </script>
    </div>
    <!--ajax 图片地址隐藏展示-->
    <div class="kuai">
        <div id="imgs"></div>
        <input type="button" onclick="fenzhuang(this)" value="封装方法" />
        <input type="button" onclick="yuansheng(this)" value="原声方法" />
        <script>
            function yuansheng(e) {
                var url = 'http://localhost:51452/content/img/head.png';
                var xhr = new XMLHttpRequest();
                xhr.open("get", url, true);
                xhr.responseType = "blob";
                xhr.onload = function () {
                    debugger
                    if (this.status == 200) {
                        var blob = this.response;
                        var img = document.createElement("img");
                        img.onload = function (e) {
                            window.URL.revokeObjectURL(img.src);
                        };
                        img.src = window.URL.createObjectURL(blob);
                        $("#imgs").append(img);
                    }
                };
                xhr.send();
            }
            function fenzhuang(e) {
                debugger
                $.ajax.imag({
                    type: 'GET',
                    url: 'http://localhost:51452/content/img/head.png',
                    resDataType: 'blob',
                    imgType: 'png',
                    success: function (resText, resXML) {
                        debugger
                        var img = document.createElement('img');
                        var objectUrl = window.URL.createObjectURL(resText);
                        img.src = objectUrl;
                        img.onload = function () {
                            window.URL.revokeObjectURL(objectUrl);
                        };
                        document.getElementById('imgs').appendChild(img);
                        //document.body.gete.appendChild(img);
                    },
                    fail: function (err) {
                        debugger
                        console.log(err)
                    }
                });
                e.preventDefault();
            }
            var $ = jQuery;
            $.ajax.imag = function (options) {
                //1.获取参数
                var type = options.type.toUpperCase() || 'GET';
                var resDataType = options.resDataType || 'string';
                var reqDataType = options.reqDataType || 'string';
                var url = options.url;
                var data = options.data;
                var success = options.success;
                var fail = options.fail;
                var progress = options.progress;
                var imgType = options.imgType || 'jpg';
                var async = options.async || true;

                //2.获取xhr对象
                var xhr = new XMLHttpRequest();// $.getXhr();

                //3.建立连接
                xhr.open(type, url, async);
                /*指定返回数据的格式需要在发送请求之前*/
                if (resDataType === 'blob') {
                    xhr.responseType = 'blob';
                }

                //4.发送请求
                if (type === 'GET') {
                    xhr.send(null)
                }
                else if (type === 'POST') {
                    if (progress) {
                        xhr.upload.onprogress = progress;
                    }
                    if (reqDataType === 'json') {
                        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
                        data = JSON.stringify(data);  //只能发送字符串格式的json,不能直接发送json
                    }
                    if (reqDataType === 'string') {
                        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    }
                    xhr.send(data);
                }

                //5.接收数据
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4 && (this.status >= 200 && this.status < 300)) {
                        var res;
                        if (resDataType === 'json') {
                            res = JSON.parse(this.responseText);
                            success.call(this, res, this.responseXML)
                        }
                        if (resDataType === 'blob') {
                            res = new Blob([this.response], { type: 'image/' + imgType });
                            success.call(this, res)
                        }

                    }
                };
            };
        </script>
    </div>
</body>
</html>
